<!DOCTYPE html>
<html lang="en">
<%
layout("/common/_body.html",{title:'我的资料'}){
var user = session.user;
%>



<body>
<!-- 页面头部 -->
<div class="header">
    <div class="header_wrap">
        <div class="header_lt">
            <h3>武汉市森林公安大数据平台</h3>
        </div>
        <%
        layout("/common/_bar.html"){}
        %>
    </div>
</div>
<!-- 中间区域 -->
<div class="main">
    <div class="menu_box">
        <%
        layout("/common/_userMenu.html",{type:1}){}
        %>
        <form action="/web/saveInfo">
            <input name="id" type="hidden" value="${user.id}" />
        <div class="userform">
            <div class="line_item head_item">
                <span class="label">头像：</span>
                <div class="line_int">
                    <div class="uploadBox">
                        <%  var userImg = '/static/images/picture.png';
                              if(isNotEmpty(user.img)){
                                 userImg=user.img;
                         }%>
                        <div class="head_img fl" style="background-image: url('${userImg}')">
                            <input type="hidden" value="${userImg}" name="img" id="userHead" />
                            <div class="camera"></div>
                        </div>
                        <div class="upload_img fl">
                            <div class="upload_btn"><span>本地照片</span><input  id="imgUpload" class="file" type="file"/></div>
                            <p>仅支持JPG、PNG格式，文件小于3M</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="line_item">
                <span class="label">昵称：</span>
                <div class="line_int">
                    <div class="inputBox"><input name="nickName" value="${user.nickName!}" placeholder="请输入昵称" type="text"/></div>
                </div>
            </div>
            <div class="line_item">
                <span class="label">性别：</span>
                <div class="line_int">
                    <ul class="sex_list">
                        <li class="${user.sex==1?'active':''}">
                            <input ${user.sex==1?'checked':''} type="radio"  hidden id="sex1"  name="sex" value="1"/>
                            <label for="sex1">男</label>
                        </li>
                        <li class="${user.sex==2?'active':''}">
                            <input ${user.sex==2?'checked':''}  type="radio" hidden id="sex2"  name="sex" value="2"/>
                            <label for="sex2">女</label>
                        </li>
                        <!--<li> <input ${user.sex==1?'checked':''} name="sex" id="sex1" type="radio"><label for="sex1">男</label></li>-->
                        <!--<li> <input ${user.sex==2?'checked':''} name="sex" id="sex2" type="radio"><label for="sex2">女</label></li>-->
                    </ul>
                </div>
            </div>
            <div class="line_item">
                <span class="label">职位：</span>
                <div class="line_int">
                    <div class="inputBox"><input name="job" value="${user.job!}" placeholder="请输入职位" type="text"/></div>
                </div>
            </div>
            <div class="line_btn">
                <span onclick="submitForm()" class="saveBtn">保存</span>
            </div>
        </div>
        </form>
    </div>
</div>

<!-- 页面底部 -->
<div class="footer">
    <div class="footer_wrap">武汉市森林公安局版权所有</div>
</div>
<%}%>

<script>
    //  $('.sex_list li input:radio:first').attr('checked', 'checked');
    //性别选择
    $(".sex_list li").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(this).find("input:radio").prop('checked','true')
    })

    $("#imgUpload").change(function () {
        var file = this.files[0];
        if(!file){
            return;
        }
        var data=new FormData();
        data.append('file',file);
        var uploadUrl = "/app/upload/imgs";
        $.ajax({
            url: uploadUrl,
            type: 'POST',
            data: data,
            dataType:'json',
            cache: false, // 不缓存
            processData: false,
            contentType: false
        }).done(function(ret){
            if (ret) {
               var img= (ret.data.url)
                $("#userHead").val(img);
                $(".head_img").css("background-image","url("+img+")" )
            }else{
                alert("上传失败")
            }
        });
    })


$(".upload_btn").click(function(){
    $("#imgUpload").trigger("change")
})


    function submitForm() {
            $("form").submit();
    }

</script>
</body>
</html>
